import React from 'react';
import { connect } from 'dva'
import queryString from 'query-string'
import {
  Button,
  Card,
  Modal,
  Tabs
} from 'antd'
import List from "./payOrderList";
import PageHeaderLayout from 'components/Layout/PageHeaderLayout';
import OrderFilterUnExpand from 'components/Filter/NormalFilter';


const payOrderLists = ({ location, dispatch, payOrderList, app, loading }) => {
  location.query = queryString.parse(location.search);
  const { items,currentItem, pagination,detailVisible, selectRows, isExpand, selectedRowKeys ,currentType} = payOrderList;
  const TabPane = Tabs.TabPane;
  const breadcrumbList = [
    {
      title: '去支付',

    }, {
      title: '订单信息',

    }
  ];
  const setOptionType = (type) => {
    dispatch({
      type: 'payOrderList/setOptionType',
      payload: type
    })
  }
  const onShowDetail = (record) => {
    setOptionType("detail")
    dispatch({
      type: 'payOrderList/setDetailVisible',
      payload: true
    })
    dispatch({
      type: 'payOrderList/detail',
      payload: record.id
    })
  }
  const listProps = {
    dataSource: items,
    loading: loading.effects['payOrderList/query'],
    pagination,
    pageChangeAction: 'payOrderList/query',
    dispatch,
    onShowDetail: onShowDetail,
    currentItem,
    global: loading.global,
    detailVisible,
    location

  };
  const filterProps = {
    filterItems: [
      {
        type: 'input',
        id: 'consigneeName',
        title: '收货人姓名'
      }, {
        type: 'select',
        id: 'sourceSystem',
        title: '订单来源',
        options: [
          {
            value: '',
            name: '全部'
          },
          {
            value: 'NULL',
            name: '分销'
          }, {
            value: 'LWJ_SHOP',
            name: '丽维家商城'
          }, {
            value: 'YOUZAN_SHOP',
            name: '有赞商城'
          }, {
            value: 'WX_LITE',
            name: '小程序'
          }
        ]
      },
      {
        type: 'select',
        id: 'payOrderStatus',
        title: '支付订单状态',
        options: [
          {
            value: "",
            name: '全部'
          }, {
            value: 'UNPAY',
            name: '待支付'
          }, {
            value: 'PENDING_PAID',
            name: '等待支付结果'
          }, {
            value: 'PAID',
            name: '已支付'
          }, {
            value: 'EXPIRED',
            name: '已作废'
          }
        ]
      }
    ],
    onFilterChange (value) {
      dispatch({
        type: 'payOrderList/query',
        payload: {
          ...value
        }
      })
    },}

  return (
    <PageHeaderLayout title="订单详情" breadcrumbList={breadcrumbList}>
      <Card bordered={false}>
        <div >
        <OrderFilterUnExpand {...filterProps} />
              <List {...listProps} />

        </div>
      </Card>
      </PageHeaderLayout>
  )
};
export default connect(({ payOrderList, app, loading }) => ({ payOrderList, app, loading }))(payOrderLists)
